<template>
  <div>
    <div>
      <el-select @change="choicYear(value)" v-model="value" :placeholder="date">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>
    <!--<div class="nodata" v-if="flag"><p style="font-size: 60px;color: #cccccc">暂无数据</p></div>-->
    <NoData v-if="flag"></NoData>
    <ul class="family_list">

      <li :key="index" v-for="(item,index) in starFamilys" class="family_item" @click="toDetail(item.code)">
        <h2 class="pb15">{{item.name}}家庭</h2>
        <div class="family_label pb15"><span>评定时间：</span>{{time}}</div>
        <div class="family_label "><span>评定星级：</span>
          <span v-for="item1 in item.lever">
           <img src="../../../assets/images/score/star.png"/>
        </span>
        </div>
      </li>

    </ul>
  </div>
</template>

<script>
  import axios from 'axios' //引入原生axios请求
  import NoData from '../../../components/nodata/NoData'
  export default {
    name: "star_family",
    data() {
      return {
        options: [],
        value: '',//选中的value值
        starFamilys: [],//星级家庭数组数据
        time: '',//评定时间
        date: '',
        flag: false,//是否显示暂无数据，默认不显示
      }
    },

    components:{
        NoData
    },


    created() {
      this.$emit('childData',this.$route.query.childdata);
      this.getLevelHomeList();
    },
    methods: {
      toDetail(code) {
        // console.log('点击进入家庭积分详情页面！:',code);
        this.$util.storage.set("code", code);
        this.$router.push({path:'/family_score',query:{pid:this.$route.query.pid}});
      },
      getLevelHomeList() {
        let arr = this.$util.selectYear(20);
        this.options = arr.reverse();
        console.log('年份数组：', arr);
        // console.log("当前年份:",new Date().getFullYear());
        this.time = new Date().getFullYear() + '年度';
        this.date = new Date().getFullYear() + '';
        this.$http.get("api/ScreenkApi/getLevelHomeList?year=" + new Date().getFullYear(), {vollege_id: this.$util.vollege_id}, r => {
          console.log('当前年份所有的星级家庭：', r.info=='暂无信息');
          if (r.info=='暂无信息') {
            this.flag=true;
          }
          this.starFamilys = r.data;
        });
      },
      async choicYear(y) {
        console.log('当前年份y:', y);
        const {data: res} = await axios.get("https://compcity.yuehuio.com/api/ScreenkApi/getLevelHomeList?year=" + y + '&vollege_id=' + this.$util.vollege_id);
        console.log('所选择的年份数据：', res.data);
        this.starFamilys = res.data
        console.log('长度：', JSON.stringify(res.data).length == 2);
        if (JSON.stringify(res.data).length == 2) {
          this.flag = true;
        } else {
          this.flag = false;
        }
      },
    }
  }
</script>

<style scoped>
  .family_list {
    padding-top: 30px;
    display: flex;
    flex-wrap: wrap;
    /*justify-content: space-between;*/
  }

  .family_item {
    float: left;
    width: 400px;
    padding: 30px 20px;
    margin-right: 73px;
    margin-bottom: 45px;
    border-radius: 8px;
    background: #f9f9f9;
    -webkit-box-shadow: 1px 3px 5px rgba(0, 0, 0, .1);
    box-shadow: 4px 4px 14px rgba(0, 0, 0, .1);
  }

  .family_item:nth-child(3n+3) {
    margin-right: 0px;
  }

  .family_item h2 {
    font-size: 30px;
  }

  .family_label {
    font-size: 28px;
  }

  .family_label span {
    color: #666;
  }

  .nodata {
    position: fixed;
    left: 38%;
    top: 50%;
  }

  .select_date{
    position: fixed;
    right: 0px;
    top: 0px;
  }
</style>
